@extends('layouts.app')

@section('content')
    <div class="container" id="user-form">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="alert alert-success tips" style="display: none;">
                    个人资料更新<strong>成功!</strong>。<a class="font-weight-light" href="{{route('user')}}"><small>点击前往个人中心</small></a>
                </div>
                <div class="alert alert-danger tips" style="display: none;">
                    操作异常，请重新尝试
                </div>

                <div class="card card-default">
                    <div class="card-header bg-white"><h4><i class="icon-edit"></i> 编辑个人资料
                        </h4></div>

                    <div class="card-body">
                        <div class="form-group">
                            <label for="name">用户名：</label>
                            <input type="text" class="form-control" id="name" v-model="form.field.name" >
                            <template v-if="form.errors.name"><span class="text-danger" >@{{form.errors.name[0]}}</span></template>
                        </div>
                        <div class="form-group">
                            <label for="email">邮箱：</label>
                            <input type="text" class="form-control" id="email" :value="form.field.email" disabled>
                            {{--<template v-if="form.errors.email"><span class="text-danger" >@{{form.errors.email[0]}}</span></template>--}}
                        </div>
                        <div class="form-group">
                            <label for="introduction">个人简介：</label>
                            <textarea class="form-control" id="introduction" v-model="form.field.introduction"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="avatar">用户头像：</label>
                            <input type="file" class="form-control" id="avatar" @change="uploadAvatar">
                            <input type="hidden" v-model="form.field.avatar"/>
                            <img :src="form.field.avatar"/>
                        </div>

                        <button type="submit" class="btn btn-primary" @click="submit">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        var user = '@json($user)';
        new Vue({
            el:'#app',
            mounted() {
                axios.get('{{route('get_current_user_json')}}').then((response) => {
                    console.log(response)
                    this.form.field = response.data;
                }).catch((error) => {
                    console.log(error)
                });
            },
            data() {
                return {
                    form:{
                        //field:JSON.parse(user),
                        field:'',
                        errors:{}
                    }
                }
            },
            methods:{
                uploadAvatar(e) {
                    let file = e.target.files[0];
                    let param = new FormData();
                    console.log(file.size);
                    if (file.size > 400 * 1024) {
                        alert('头像大小不能超过400KB,请换一个小一点的图片做头像');
                        return false;
                    }
                    param.append('file',file,file.name);
                    param.append('chunk','0');
                    let config = {
                        headers:{'Content-Type':'multipart/form-data'}
                    };
                    axios.post('{{route('upload.avatar')}}',param,config)
                    .then((response) =>{
                        if (response.data.status) {
                            this.form.field.avatar = response.data.url;
                        } else {
                            alert(response.data.msg);
                        }

                    }).catch((error) => {
                        console.log(error)
                    });
                },
                submit() {
                    axios.post('{{route('user.update')}}',this.form.field).then((response) => {
                        if (response.data) {
                            $('.alert-danger').css('display','none');
                            $('.alert-success').css('display','');
                            $('html,body').animate({scrollTop:$('body').offset().top},200);
                        }
                    }).catch((error) => {
                        console.log(error)
                        if (error.response.status == 422) {
                            this.form.errors = error.response.data.errors;
                        } else {
                            $('.alert-success').css('display','none');
                            $('.alert-danger').css('display','');
                            $('html,body').animate({scrollTop:$('body').offset().top},200);
                        }
                    });

                }
            }
        });
    </script>
@endsection